<template>
  <div style="margin: 10px;">
    <el-row :gutter="10">
        <el-col :span="7">
            <el-card style="height: 700px;">
                <el-row>
                    <el-col :span="16">
                        <div class="title">
                            上月设备能耗
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="topRigth">
                            <el-radio-group v-model="radio1" size="small">
                                <el-radio-button name="electricity"  label="electricity">电耗</el-radio-button>
                                <el-radio-button name="water" label="water">水耗</el-radio-button>
                            </el-radio-group>
                        </div>
                    </el-col>
                </el-row>
                <div class="qushiboxc">
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 视频监控</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="90" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">239kwh</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 智能照明</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="80" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">181kwh</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 空调风机</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="68" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">154kwh</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 电梯</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="58" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">144kwh</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 信息发布</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="40" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">105kwh</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 停车场</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="50" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">117kwh</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="5"><div class="ph-text"> 智能灌溉</div></el-col>
                        <el-col :span="13"><el-progress :text-inside="true" :stroke-width="16" :percentage="43" color="#6666ff"></el-progress></el-col>
                        <el-col :span="6">74kwh</el-col>
                    </el-row>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="7">
            <el-card style="height: 300px;">
                <div class="title">能耗设备统计</div>
                <div style="text-align: center;">回路总数 &nbsp150</div>
                <div>
                    <el-row :gutter="10">
                        <el-col :span="8" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/quankai.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">全开</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">120</div>
                        </el-col>
                        <el-col :span="8" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/li.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">半开</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">10</div>
                        </el-col>
                        <el-col :span="8" style=" text-align: center;">
                            <div class="shebeiTop">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="require('@/assets/img/gu.png')"
                                    >
                                </el-image>
                            </div>
                            <div class="shebeiTop ph-text">全关</div>
                            <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">20</div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <el-card style="height: 388px;margin-top:10px ;">
                <el-row>
                    <el-col :span="16">
                        <div class="title">
                            上月空间排名
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="topRigth">
                            <el-radio-group v-model="radio2" size="small">
                                <el-radio-button name="electricity1"  label="electricity1">电耗</el-radio-button>
                                <el-radio-button name="water1" label="water1">水耗</el-radio-button>
                            </el-radio-group>
                        </div>
                    </el-col>
                </el-row>
                <div class="cesuo-list">
                    <el-table
                    :data="tableData"
                    height="340"
                    style="width: 100%;font-size: 12px;"
                    >
						<el-table-column
							prop="ranking"
							label="能耗排名"
							align="center">
                        <template slot-scope="scope">
						  <span v-if="scope.$index<3" :class="'pmcolor-'+(scope.$index+1)"><i class="el-icon-medal"></i>{{ scope.$index+1 }}</span>
                          <span v-else :class="'pmcolor-'+(scope.$index+1)">{{ scope.$index+1 }}</span>
                        </template>
						</el-table-column>
						<el-table-column
							prop="spacename"
							label="空间名称"
							align="center">
						</el-table-column>
						<el-table-column
							prop="lastmonth"
							label="上月能耗"
							align="center">
						</el-table-column>
						<el-table-column
							prop="spatialposition"
							label="空间位置"
							align="center">
						</el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card style="height: 344px;">
                <el-row>
                    <el-col :span="12">
                        <div class="title">
                            楼层能耗统计
                        </div>
                    </el-col>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select v-model="value1" style="width: 100px;"  size="mini" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div class="topRigth">
                        <el-col :span="6" >
                            <el-select
                                size="mini"
                                v-model="value2"
                                style="width: 100px;"
                                collapse-tags
                                placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                </el-row>
                <div class="echartsbox" ref="echarts">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
            <el-card style="height: 344px;margin-top:10px ;">
                <el-row>
                    <el-col :span="12">
                        <div class="title">
                            能耗时间段统计
                        </div>
                    </el-col>
                    <div class="topRigth">
                        <el-col :span="12" >
                            <el-select
                                size="mini"
                                v-model="value3"
                                style="width: 100px;"
                                collapse-tags
                                placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </div>
                </el-row>
                <div class="echartsbox" ref="echarts2">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        radio1:'electricity',
        radio2:'electricity1',
        tableData:[{
            ranking:'1',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'2',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'3',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'4',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'5',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'6',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'7',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        },{
            ranking:'8',
            spacename:'设备房',
            lastmonth:'500KWh',
            spatialposition:'1栋1层209'
        }],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: [],
        value3: []
    }
  },
  created () {
  },
  mounted () {
    this.loucnegnenggaoEcharts()
    this.nenghaoshijianEcharts()
  },
  methods: {
    loucnegnenggaoEcharts(){
        var echarts=this.$refs.echarts;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts);
		  }
		  
		  var option;

          option = {
                    tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                    },
                    grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                    },
                    calculable: true,
                    legend: {
                        //   指示框名字  注意！要和下方series中的name一起改
                        data: [],
                        // 指示框位置  距离上下左右多少
                        right: '5%',
                        // top: '50%',
                        textStyle: {
                            color: '#4F4F4F'   //字体颜色
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1F', '2F', '3F', '4F', '5F','6F','7F','8F','9F','10F'],
                            axisLine: {   //x轴线的颜色以及宽度
                                show: true,   //是否显示X轴
                                lineStyle: {
                                    color: "#4F4F4F",
                                }
                            },
                            axisLabel: {
                                // interval: 0,  //间隔几条显示
                                // rotate: 20,  // 切斜度数
                                // fontSize: 10,   //字体大小
                            },
                            axisTick: {
                                //是否显示刻度线
                                show: false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisTick: {
                                //y轴刻度线
                                show: false
                            },
                            axisLine: {
                                show: true, // Y轴
                                lineStyle: {
                                    color: "#4F4F4F",
                                }
                            },
                            splitLine: { // 表格里面Y轴线条
                                show: true,
                            },
                            nameLocation:'end',//设置Y轴位置
                            name:'(kwh)',//设置Y轴单位
                        }
                    ],
                    series: [
                        {
                            barWidth: 30,//柱子宽度
                            name: '男',
                            type: 'bar',
                            data: [
                                28.7, 70.7, 175.6, 182.2, 48.7,160,111,63,30,76
                            ],
                            itemStyle: {
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左] 
                                    //   自定义柱状图颜色渐变
                                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: "#249EFD" },
                                        { offset: 1, color: "#017CE4" },
                                    ]),
                                }
                            }
                        }
                    ]
                };

          option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    },
    nenghaoshijianEcharts(){
        var echarts2=this.$refs.echarts2;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts2
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts2);
		  }
		  
		  var option;

          option = {
                    tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                    },
                    grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                    },
                    calculable: true,
                    legend: {
                    //   指示框名字  注意！要和下方series中的name一起改
                    data: [],
                    // 指示框位置  距离上下左右多少
                    right: '5%',
                    // top: '50%',
                    textStyle: {
                    color: '#4F4F4F'   //字体颜色
                    }
                    },
                    xAxis: [
                    {
                    type: 'category',
                    data: ['1F', '2F', '3F', '4F', '5F','6F','7F','8F','9F','10F'],
                    axisLine: {   //x轴线的颜色以及宽度
                        show: true,   //是否显示X轴
                        lineStyle: {
                            color: "#4F4F4F",
                        }
                    },
                    axisLabel: {
                        // interval: 0,  //间隔几条显示
                        // rotate: 20,  // 切斜度数
                        // fontSize: 10,   //字体大小
                    },
                    axisTick: {
                        //是否显示刻度线
                        show: false
                    },
                    }
                    ],
                    yAxis: [
                    {
                    type: 'value',
                    axisTick: {
                        //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: true, // Y轴
                        lineStyle: {
                            color: "#4F4F4F",
                        }
                    },
                    splitLine: { // 表格里面Y轴线条
                        show: true,
                    },
                    nameLocation:'end',//设置Y轴位置
                    name:'(kwh)',//设置Y轴单位
                    }
                    ],
                    series: [
                    {
                    barWidth: 30,//柱子宽度
                    name: '男',
                    type: 'bar',
                    data: [
                        28.7, 70.7, 175.6, 182.2, 48.7,160,111,63,30,76
                    ],
                    itemStyle: {
                        //颜色样式部分
                        normal: {
                            barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左] 
                            //   自定义柱状图颜色渐变
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: "#00cc99" },
                                { offset: 1, color: "#00cccc" },
                            ]),
                        }
                    }
                    }
                    ]
                    };


          option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    }
  },
}
</script>
<style lang="scss" scoped>
.title{
	padding: 10px;
	font-weight: bold;
}
.ph-text{
    font-size: 12px;
}
.topRigth{
    float: right;
    padding: 10px;
}
.echartsbox{
    width: 100%;
    height: 300px;
}
.pmcolor-1{
  color:#ECD061;
  font-size:17px;
  margin-left:-15px;
}
.pmcolor-2{
  color:#CBDDE0;
  font-size:17px;
  margin-left:-15px;
}
.pmcolor-3{
  color:#FEBB9A;
  font-size:17px;
  margin-left:-15px;
}
.pmcolor-4,.pmcolor-5,.pmcolor-6,.pmcolor-7,.pmcolor-8,.pmcolor-9{
  font-size:16px;
}
.paihang-lanmu{
  padding:15px 5px 15px 15px;
}
.shebeiTop{
    margin-top: 20px;
}
</style>
